<template>
  <el-scrollbar class="test-log">
    <div v-if="logList.length" class="list">
      <DynamicScroller style="height: 100%; overflow: auto" :items="logList" key-field="id" :min-item-size="30" @scroll-end="scrollEnd">
        <template #default="{ item, index, active }">
          <DynamicScrollerItem :item="item" :active="active" :data-index="index">
            <div class="item">
              <div class="time">{{ $filters.formatDate(new Date(item.time), "YYYY-MM-DD HH:mm:ss.SSS") }}</div>
              <div class="summary">{{ item.summary }}</div>
            </div>
          </DynamicScrollerItem>
        </template>
      </DynamicScroller>
    </div>
    <Empty v-else :props="{ imageSize: 80 }" />
  </el-scrollbar>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { getTestLogsByPage } from "../../api/test/index";
import type { TestLogsItem } from "../../api/test/index.d";
import { onMounted } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const query = ref({ pageIndex: 1, pageSize: 100 });
const logList = ref<TestLogsItem[]>([]);
const total = ref(0);
onMounted(() => {
  getTestLog();
});
const getTestLog = async () => {
  const {
    data: { list, total_Count }
  } = await getTestLogsByPage(query.value, { taskId: route.query.taskId });
  logList.value = [...logList.value, ...(list || [])];
  total.value = total_Count || 0;
};
const setTestLog = (log: TestLogsItem) => {
  logList.value.push({ ...log, id: String(+new Date()) });
};
const clearTestLog = () => {
  logList.value = [];
};
const scrollEnd = () => {
  if (logList.value.length < total.value) {
    console.log("滚动到最底部");
    query.value.pageIndex++;
    getTestLog();
  }
};
defineExpose({ setTestLog, clearTestLog });
</script>

<style lang="scss" scoped>
.test-log {
  height: calc(100% - 20px);
  padding: 10px;
  :deep(.el-scrollbar__view) {
    height: 100%;
  }
  .list {
    height: 100%;
    .item {
      display: flex;
      position: relative;
      padding-bottom: 12px;
      line-height: 18px;
      .time {
        color: #666;
        margin-right: 10px;
        white-space: nowrap;
      }
    }
  }
}
</style>
